'use client'
import { FC, PropsWithChildren } from "react";
import { useRouter } from "@/i18n";
import './page.css'

interface Props { }
const App: FC<PropsWithChildren<Props>> = (props) =>{
    const router:any = useRouter()
    const goPage = (path = '')=>{
        if(path){
            if(path === 'home'){
                router.replace('/')
                return
            }
            
            console.log(router);
            
            router.replace(`/affiliate/${path}`)
            return 
        }
        router.back()
    }
    return (
        <div className="vux-drawer">
            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                    <div className="headerBack">
                        <div className="left" onClick={()=>goPage()}>
                            <span className="iconfont icon-xiangzuo1"></span>
                        </div>
                        <span className="title">
                            Afiliado 
                            <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                        </span>
                        <span className="right" onClick={()=>goPage('home')}>
                            <span className="iconfont icon-home_line router-link-active"></span>
                        </span>
                    </div>
                    <div className="tabs alginLeft van-tabs van-tabs--line">
                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                    <span className="van-tab__text">PAINEL</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('referrals')}>
                                    <span className="van-tab__text">REFERÊNCIAS</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('report')}>
                                    <span className="van-tab__text">RELATÓRIO</span>
                                </div>
                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('payments')}>
                                    <span className="van-tab__text">PAGAMENTOS</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                    <span className="van-tab__text">FAQ</span>  
                                </div>
                                <div className="van-tab">
                                    <span className="van-tab__text">TUTORIAL</span>
                                </div>
                                <div className="van-tabs__line" style={{transform: "translateX(358px) translateX(-50%); transition-duration: 0.3s"}}></div>
                            </div>
                        </div>
                        <div className="van-tabs__content"></div>
                    </div>
                    <div className="content">
                        <div className="referralPayment referral-router-view">
                            <ul className="header">
                                <li>
                                    <div>Data</div>
                                    <div>Detalhe</div>
                                    <div>Comissão</div>
                                    <div>Status</div>
                                </li>
                            </ul>
                            <div role="feed" className="list van-list">
                                <div className="van-list__finished-text">Opa! Ainda não há dados!</div>
                                <div className="van-list__placeholder"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="drawer-mask"></div>
            </div>
        </div>
    )
}
export default App